<template>
	<view class="detWrap">
		<template v-if="orderInfo != null">
			<view class="orderStatus" v-if="fromPage == 'yyRec'">
				<template v-if="orderInfo.zxStatus == 1">
					<view class="statusTit">
						<text class="iconfont icon-jingshi"></text>
						<text>待咨询</text>
					</view>
					<view class="info">您已成功预约咨询师,请准时前往咨询</view>
				</template>
				<template v-else-if="orderInfo.zxStatus == 6">
					<view class="statusTit">
						<text class="iconfont icon-wancheng"></text>
						<text>已完成</text>
					</view>
					<view class="info">您的咨询已完成</view> 
				</template>
				<template v-else-if="orderInfo.zxStatus == 7">
					<view class="statusTit">
						<text class="iconfont icon-quxiao"></text>
						<text>已取消</text>
					</view>
					<view class="info">您的咨询预约已作废,如需咨询请另行预约</view>
				</template>
			</view>
			<view class="modCon">
				<mod-tit :modTit="currTit" :hasBorBotFlag="true"></mod-tit>
				<template v-if="fromPage == 'yyRec'">
					<view class="conItem" style="margin-top: 20rpx;">
						<view class="itemTit">咨询师</view>
						<view class="itemCon alignCen" style="justify-content: flex-end;">
							<image class="userHeadZxs" v-if="orderInfo.headImg == ''" :src="defHead"></image>
							<image class="userHeadZxs" mode="aspectFill" v-else :src="orderInfo.headImg"></image>
							<text>{{orderInfo.zxsName}}</text>
						</view>
					</view>
					<view class="conItem">
						<view class="itemTit">咨询时间</view>
						<view class="itemCon specCol">{{orderInfo.zxDate}} {{orderInfo.zxClassTime}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">咨询地点</view>
						<view class="itemCon">{{orderInfo.zzName}}</view>
					</view>
					<view class="conItem" style="border-bottom: 1rpx solid #ccc;padding-bottom: 20rpx;">
						<view class="itemTit">咨询方式</view>
						<view class="itemCon">面对面咨询</view>
					</view>
					<mod-tit modTit="咨询内容"></mod-tit>
					<view class="tagMod hasFlex">
						<view class="tagItem"
							v-for="(item,index) in toArrayFuns((orderInfo.zxrCurrInfo),',')"
							:key="index"
						>{{item}}</view>
					</view>
				</template>
				<template v-else-if="fromPage == 'zxRec'">
					<view class="conItem" style="margin-top: 20rpx;">
						<view class="itemTit">姓名</view>
						<view class="itemCon alignCen" style="justify-content: flex-end;">
							<image class="userHeadZxs" v-if="orderInfo.headImg == ''" :src="defHead"></image>
							<image class="userHeadZxs" mode="aspectFill" v-else :src="getCloudFilePath(orderInfo.headImg)"></image>
							<text>{{zxrInfo.zxrName}}</text>
						</view>
					</view>
					<view class="conItem">
						<view class="itemTit">性别</view>
						<view class="itemCon">{{zxrInfo.zxrSex}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">联系电话</view>
						<view class="itemCon">{{zxrInfo.zxrMobile}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">紧急联系人</view>
						<view class="itemCon">{{zxrInfo.lxrName}}</view>
					</view>
					<view class="conItem">
						<view class="itemTit">紧急联系人电话</view>
						<view class="itemCon">{{zxrInfo.lxrMobile}}</view>
					</view>
				</template>
			</view>
			<view class="modCon" v-if="fromPage == 'zxRec'">
				<mod-tit modTit="咨询内容"></mod-tit>
				<view class="tagMod hasFlex">
					<view class="tagItem"
						v-for="(item,index) in toArrayFuns((zxrInfo.zxrCurrInfo),',')"
						:key="index"
					>{{item}}</view>
				</view>
				<mod-tit modTit="预约时间"></mod-tit>
				<view class="content">{{orderInfo.zxDate}} {{orderInfo.zxClassTime}}</view>
				<mod-tit modTit="预约地址"></mod-tit>
				<view class="content">{{orderInfo.zzName}}</view>
				<mod-tit modTit="咨询前问答"></mod-tit>
				<view class="queMod">
					<view class="queItem">
						<view>1、是否接受过心理咨询?</view>
						<view class="queAns">{{(zxrInfo.experience).split(',')[0]}}</view>
					</view>
					<view class="queItem">
						<view>2、是否接受过精神科相关的诊断或治疗?</view>
						<view class="queAns">{{(zxrInfo.experience).split(',')[1]}}</view>
					</view>
					<view class="queItem">
						<view>3、否有过自伤/自杀的想法或行为?</view>
						<view class="queAns">{{(zxrInfo.experience).split(',')[2]}}</view>
					</view>
					<view class="queItem">
						<view>4、从哪知道该平台的?</view>
						<view class="queAns">{{(zxrInfo.experience).split(',')[3]}}</view>
					</view>
				</view>
			</view>
			<view class="modCon">
				<mod-tit modTit="订单信息" :hasBorBotFlag="true"></mod-tit>
				<view class="conItem">
					<view class="itemTit">下单时间</view>
					<view class="itemCon">{{orderInfo.addTime}}</view>
				</view>
				<view class="conItem">
					<view class="itemTit">订单编号</view>
					<view class="itemCon">{{orderInfo.orderNoLocal}}</view>
				</view>
				<view class="conItem">
					<view class="itemTit">订单状态</view>
					<view class="itemCon wait" v-if="orderInfo.zxStatus == 1">待咨询</view>
					<view class="itemCon comp" v-if="orderInfo.zxStatus == 6">已完成</view>
					<view class="itemCon cancel" v-if="orderInfo.zxStatus == 7">已取消</view>
				</view>
				<view class="conItem" v-if="fromPage == 'zxRec' && orderInfo.zxStatus == 6">
					<view class="itemTit">是否支持咨客查看报告</view>
					<view class="itemCon comp" v-if="orderInfo.zxReport.viewTag == 1">支持</view>
					<view class="itemCon not" v-else>不支持</view>
				</view>
			</view>
			<button class="comBtn" @tap="goAddZxRep('add')" v-if="fromPage == 'zxRec' && orderInfo.zxStatus == 1">填写咨询报告</button>
			<button class="comBtn view" @tap="goViewZxRep('view')" v-if="(fromPage == 'zxRec' || (fromPage == 'yyRec' && orderInfo.zxReport.viewTag == 1))  && orderInfo.zxStatus == 6">查看咨询报告</button>
		</template>
		<template v-else>
			<view class="loadingWrap">
				<loading loadType="2"></loading>
			</view>
		</template>
		
	</view>
</template>

<script>
	import ModTit from '@/components/mod-tit/mod-tit.vue'
	import { getZzXlzxDet } from '@/api/mine/index.js'
	export default {
		components:{
			ModTit
		},
		data(){
			return{
				defHead:this.defHead,
				fromPage:'',//yyRec(我的预约) zxRec(我的咨询) gyRec(我的干预)
				orderId:'',
				orderInfo:null,
				zxrInfo:null,
				currTit:'',
				roleName:uni.getStorageSync('roleName'),
				isRefreshFlag:false
			}
		},
		computed:{
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			}
		},
		onLoad(option){
			this.fromPage = option.fromPage;
			this.orderId = option.orderId;
			if(this.roleName == '居民'){
				this.currTit = '咨询详情';
			}else if(this.roleName == '咨询师'){
				this.currTit = '咨询人信息';
			}
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title:'咨询详情'
				})
			},100)
			this.getDet();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.getDet();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		methods:{
			getDet(){
				let field = { id:this.orderId }
				getZzXlzxDet(field).then(res=>{
					console.log(res)
					this.orderInfo = res.data.datas;
					if(this.fromPage == 'zxRec'){
						this.zxrInfo = this.orderInfo.zxrList[0];
					}
				}).catch(err=>{})
			},
			goAddZxRep(opt){
				this.comonJump(opt);
			},
			goViewZxRep(opt){
				uni.setStorageSync('zxReport',this.orderInfo.zxReport);
				this.comonJump(opt);
			},
			comonJump(opt){
				uni.navigateTo({
					url:'/pages/subMine/myYy/addZxRep?orderId=' + this.orderId + '&currType=' + opt
				})
			}
		}
	}
</script>
        
<style lang="scss">
	page{
		background: $pss-bg-primary;
		border-top: $comBor;
	}
	@import '@/static/scss/orderDet.scss'; 
</style>